<template>
  <div class="container">
    <van-nav-bar title="21天攒图计划" left-arrow @click-left="onClickLeft" right-icon="edit" @click-right="onClickRight"/>
    <div class="banner">
      <div class="banner-content">
        <h3>21天攒图计划招募令</h3>
        <p>每日一画，不画就出局</p>
        <p>来吧，一起坚持21天，做行动派！</p>
      </div>
    </div>
    <div class="tabs">
      <van-tabs v-model="active" color="#f76261" @change="onChange">
        <van-tab title="最热" name="old">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <div v-for="(item, index) in list" :key="index" class="item">
              <div class="item-header">
                <van-image width="30" height="30" :src="item.authorImageUrl"/>
                <div class="item-info">
                  <span class="item-name">{{ item.authorUsername }}</span>
                  <span class="item-time">{{ item.createTime }}</span>
                </div>
              </div>
              <div class="item-content">
                <p>{{ item.content }}</p>
                <div class="item-images">
                  <van-image width="100" height="100" :src="item.contentImg"/>
                </div>
              </div>
              <div class="item-footer">
                <van-icon name="like-o" size="16" class="icon"/>
                <span class="icon-text">{{ item.praises }}</span>
                <van-icon name="star-o" size="16" class="icon"/>
                <span class="icon-text">{{ item.review }}</span>
                <van-icon name="chat-o" size="16" class="icon"/>
                <span class="icon-text">{{ item.collect }}</span>
              </div>
            </div>

          </van-list>
          <div class="button-area">
            <van-button type="primary" round>关注</van-button>
            <van-icon name="share"/>
          </div>
        </van-tab>
        <van-tab title="最新" name="new">
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {get,post} from "../../util/request"; // 确保正确导入 Toast
import {useRouter} from "vue-router";


const active = ref('old');
const list = ref([]);
const router = useRouter();


const onTabChange = (tab) => {
  if (tab === 'old') {
    fetchData()
  }
};


onMounted(() => {
  if (active.value === 'old') {
    fetchData()
  }
});


const fetchUserDataForArticles = async (articles) => {
  //发起axios

  for (let article of articles) {
    try {
      const userDataResponse = await get(`user/user/selectUser/${article.userId}`);
      if (userDataResponse.code === 0) {
        const userData = userDataResponse.data;
        articles.value.authorUsername = userData.username;
        articles.value.authorImageUrl = userData.imageUrl;
      } else {
        console.error()
      }
    } catch (error) {
    }

  }
  return articles;
};

const fetchData = async () => {
  try {
    const response = await get('circle/selectTypeId');
    if (response.code === 0) {
      list.value = response.data; // 假设返回的数据结构与你的list匹配
      await fetchUserDataForArticles(list.value);
    } else {
      console.error('请求失败，状态码：', response.status);
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
};

const onClickLeft = () => {
  router.push('circle')
};

const onClickRight = () => {
  console.log('点击了右边的编辑按钮');
};


</script>

<style scoped>
.container {
  padding-top: 46px;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background-color: #f5f5f5;
}

.banner-content {
  flex: 1;
}

.banner-content h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.banner-content p {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.banner-button {
  display: flex;
  align-items: center;
}

.banner-button span {
  font-size: 12px;
  color: #999;
  margin-right: 5px;
}

.tabs {
  margin: 15px;
}

.item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.item-header {
  display: flex;
  align-items: center;
}

.item-info {
  margin-left: 10px;
}

.item-name {
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.item-time {
  font-size: 12px;
  color: #999;
}

.item-content {
  margin-top: 10px;
}

.item-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.button-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background-color: #f5f5f5;
}
</style>